<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const emit = defineEmits({})
const props = defineProps({

equipmentShow: {
  type: Boolean
},
pesonalShow: {
  type: Boolean
}
})
// 中心表单
const formCenter = ref({
  center: '',
  name: '',
  date1: '',
  date2: '',
  region: '',
})

// 重置表单
const reset = () => {
  formCenter.value = {
    center: '',
    name: '',
    date1: '',
    date2: '',
    region: '',
  }
}

const search = () => {
  emit('search')
}
</script>

<template>
  <div class="formHeader-page">
    <el-card>
      <el-form >
        <el-row v-if="props.equipmentShow">
          <el-col :span="9">
            <el-form-item label="入库时间">
              <el-col :span="11">
                <el-date-picker v-model="formCenter.date1" type="date" placeholder="起始时间" style="width: 100%" />
              </el-col>
              <el-col :span="2" class="text-center">
                <span class="text-gray-500">至</span>
              </el-col>
              <el-col :span="11">
                <!-- <el-time-picker v-model="formCenter.date2" placeholder="Pick a time" style="width: 100%" /> -->
                <el-date-picker v-model="formCenter.date1" type="date" placeholder="截止时间" style="width: 100%" />
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否启用">
              <el-select v-model="formCenter.region" class="elInput" placeholder="全部">
                <el-option label="是" value="shanghai" />
                <el-option label="否" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="6">
            <el-form-item :label="props.equipmentShow? '设备ID': (props.pesonalShow ?'姓名':'中心名称') ">
              <el-input v-model="formCenter.center" class="elInput" placeholder="请输入中心名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="props.equipmentShow?'状态': (props.pesonalShow ? '设备ID':'负责人')">
              <el-input v-model="formCenter.name" class="elInput" placeholder="请输入负责人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="reset" auto-insert-space>重置</el-button>
              <el-button @click="search" type="primary" auto-insert-space><el-icon style="margin-left: -10px">
                  <Search />
                </el-icon>&nbsp;搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
// .formHeader-page{
// min-height: 90px;
  .el-form-item {
    width: 350px;
    margin: 9px 0 9px 30px;
  }
// }
</style>
